<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="google" value="notranslate">
		<title>PathJS Demo</title>
		
		<style type="text/css">
			html, body {margin:0; padding:0; width:100%;}
			body {
				background-color: #f2f2f2; color:#5f5f5f; 
				font-size:14px; font-family: "Helvetica Neue",Helvetica,Arial;
			}
			pre, code {
				margin:0 !important; padding:0;
				font-family: Consolas, Monaco;
			}
			.code {padding:20px 30px; margin:20px; background-color:#fff; border:1px dashed #ccc;}

			.nav {
				position: absolute; 
				left:30px; top:30px;
				width:300px; 
				padding:10px;
				border:1px solid #ccc; 
				background-color:#fff; 
				box-shadow:0 2px 5px 0 rgba(0,0,0,0.26); 
			}
			.nav ul li {margin:5px 0; padding:0;}
			.nav ul li a {display: block; padding:5px; font-size:20px;}

			.rgt {
				margin-left: 360px;
				padding-top:30px;
			}
			#content { margin:0 auto; padding:30px 20px; line-height: 1.5; font-size:28px; font-weight: 700; text-align:center;}
			#content h3 {text-decoration:underline; color:#cc0000;}
			#content h4 {color:#0000ff;}
			.page-in {
				color:#fff;
				background-color: #ff9800;
				border-radius: 10px;
				box-shadow: inset 5px 5px 5px rgba(0, 0, 0, 0.3);
				-moz-transition: all 0.5s ease-in;
			    -webkit-transition: all 0.5s ease-in;
			    -o-transition: all 0.5s ease-in;
			    transition: all 0.5s ease-in;
			}
			.page-out {
				color:inherit;
				background-color: transparent;
				border-radius: 0;
				box-shadow: none;
				-moz-transition: all 0.5s ease-out;
			    -webkit-transition: all 0.5s ease-out;
			    -o-transition: all 0.5s ease-out;
			    transition: all 0.5s ease-out;
			}
		</style>

		<script type="text/javascript" src="../path.js"></script>

	</head>
	<body>
	    
		<div class="nav">
			<ul>
				<li><a href="#!/about">About</a></li>
				<li><a href="#!/page?pid=0&tags=java&tags=javascript">Page</a></li>
				<li><a href="#!/page/Page-1?pid=100&tags=python">Page-1</a></li>
				<li><a href="#!/page/页面-2?pid=200&tags=css">页面-2</a></li>
				<li><a href="#!/page/页面-3?pid=300&tags=nginx">页面-3</a></li>
				<li><a href="#!get.1234.mime">get.1234.mime</a></li>
				<li><a href="#!get.586985.home">get.586985.home</a></li>
				<li><a href="#!get.5869ab.home">get.5869ab.home - 不是数字</a></li>
				<li><a href="#!get.48523..comments.list">get.48523..comments.list</a></li>
				<li><a href="#!list.200.3">list.200.3</a></li>
				<li><a href="#!list/2a34da34/3">list/2a34da34/3</a></li>
				<li><a href="#!list/2a34da34/">list/2a34da34/</a></li>
				<li><a href="#!/users/1/comments.list?page=2">/users/1/comments.list?page=2</a></li>
				<li><a href="#!/a">/a</a></li>
				<li><a href="#!/b">/b</a></li>
				<li><a href="#!/c">/c</a></li>
				<li><a href="#!/100">/100</a></li>
				<li><a href="#!/200">/200</a></li>
			</ul>
		</div>

		<div class="rgt">
			<div id="content"></div>
		
		<div class="code">
<pre><code>
// 普通URL路径
Path.map('/about').enter(function() {
	// TODO
}).to(function() {
	// TODO
}).exit(function() {
	// TODO
});

// 带命名参数的URL路径，且命名参数是可选的
Path.map('/page/:pageid?').to(function() {
	// this.params['pageid']
});

// 带命名参数的URL路径，且命名被正则限定了类型
Path.map('get.:bid(\\d+).:btype').to(function() {
	// this.params['bid'], 
	// this.params['btype'];
});

// 带命名参数的URL路径
Path.map('get.:bid..comments.list').to(function() {
	// this.params['bid'];
});

// 使用正则定义作为参数的URL路径
Path.map('list.(\\d+).(\\d+)').to(function() {
	// this.params[0]
	// this.params[1]
});

// 使用正则定义作为参数的URL路径
Path.map('list/:id/*').to(function() {
	// this.params['id'], this.params.id
	// this.params[0]
});

// 使用数组定义匹配任意一个的URL路径
Path.map(['/a', '/b', '/c']).to(function() {
	
});

// 完全使用一个正则对象表示URL路径
Path.map(/^\/(\d+)$/).to(function() {
	
});

// 默认跳转到哪个URL路径
Path.root('/about');

// 当所定义的全部URL路径都不匹配时，将执行这个函数
Path.rescue(function() {
	//404
});
</code></pre>
		</div>

	</div>
	</body>
<script type="text/javascript">
	function $id(_id) {
		return document.getElementById(_id);
	}

	function updateContent(str) {
		$id('content').innerHTML = '<h3>Match path: '+ this.path +'</h3>' 
									+ '<h4>PathRegExp: '+ this.pathRegExp +'</h4>'
									+ str;
	}

	Path.map('/about').enter(function() {
		$id('content').className = 'page-in';
	}).to(function() {
		updateContent.call(this, 'PathJS is a lightweight, client-side routing library that allows you to create "single page" applications using Hashbangs and/or HTML5 pushState.');
	}).exit(function() {
		$id('content').className = 'page-out';
	});

	Path.map('/page/:page_name?').to(function() {
		var pname = this.params['page_name'];
		updateContent.call(this, 
			'this.params[\'page_name\'] = '+ (pname || 'NaN')
			+ '<br> this.params[\'pid\'] = '+ (this.params['pid'] || 'NaN')
			+ '<br> this.params[\'tags\'] = '+ (this.params['tags'] || 'NaN')
		);
	});

	Path.map('get.:bid(\\d+).:btype').to(function() {
		var bid = this.params['bid'], 
			btype = this.params['btype'];
		updateContent.call(this, 
			'this.params[\'bid\']= ' + bid
			+ '<br>this.params[\'btype\']= ' + btype);
	});

	Path.map('get.:bid..comments.list').to(function() {
		var bid = this.params['bid'];
		updateContent.call(this, 'this.params[\'bid\']= '+ bid);
	});

	Path.map('list.(\\d+).(\\d+)').to(function() {
		updateContent.call(this,
			'this.params[0]= ' + this.params[0] 
			+ '<br>this.params[1]= ' + this.params[1]);
	});

	Path.map('list/:id/*').to(function() {
		updateContent.call(this,
			'this.params[\'id\']= '+ this.params['id']
			+ (this.params[0] ? '<br>this.params[0]= '+ this.params[0] : '')
			);
	});

	// /users/1/comments.list.1
	Path.map('/users/:id/(\\w+).:action\\?page=(\\d+)').to(function() {
		updateContent.call(this,
			'this.params[\'id\']= '+ this.params['id']
			+ '<br>this.params[0]= ' + this.params[0]
			+ '<br>this.params[\'action\']= ' + this.params['action']
			+ '<br>this.params[1]= ' + this.params[1]
			);
	});

	Path.map(['/a', '/b', '/c']).to(function() {
		updateContent.call(this, 'Matched');
	});

	Path.map(/^\/(\d+)$/).to(function() {
		updateContent.call(this, 'Matched');
	});


	Path.root('/about');

	Path.rescue(function() {
		updateContent('404! Not match any path defined!');
	});

	Path.listen();

</script>
</html>